<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    测试swoole websocket
    <button type="button" class="btn btn-large btn-block btn-default" id="btn">点我</button>
    <div id="show">

    </div>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
    <!-- <script>
        const socket = new WebSocket('ws://www.swoole-test.com:9501');
    
        // Connection opened
        socket.addEventListener('open', function (event) {
            socket.send('Hello Server!');
        });
    
        // Listen for messages
        socket.addEventListener('message', function (event) {
            var data = event.data;
            console.log(data);
        });
    
        $("#btn").on('click', function() {
            socket.send(1);
        });
    </script> -->
    <script>

        var server = "ws://118.24.45.90:9501";
        var ws = new WebSocket(server);
        //连接
        ws.onopen = function (evt) {
            heartCheck.reset().start(); //心跳检测重置
            var login_data = '{"type":"login","user_id":'+"{:session('admin_id')}"+'}';
            ws.send(login_data);
        }
        //发送消息
        ws.onmessage = function (evt) {
            heartCheck.reset().start(); //心跳检测重置
            var data = eval("(" + evt.data + ")");
            switch (data.message){
                case 'push':
                    //存在未处理订单
                    $('.order-div > span').text(data['data']['order_count']);
                    if(data['data']['order_count'] > 0) {
                        $('.order-div').removeClass('div-close');
                    }else{
                        $('.order-div').addClass('div-close');
                    }

                    //存在待审核账号
                    $('.account-div > span').text(data['data']['account_count']);
                    if(data['data']['account_count'] > 0) {
                        $('.account-div').removeClass('div-close');
                    }else{
                        $('.account-div').addClass('div-close');
                    }

                    //未读通知消息
                    if(data['data']['total_notice'] > 0) {
                        $('.message-span-num').text(data['data']['total_notice']);

                        if($('.message-span-num').hasClass('div-close')) {
                            $('.message-span-num').removeClass('div-close');
                        }

                    }else{
                        if(!$('.message-span-num').hasClass('div-close')) {
                            $('.message-span-num').addClass('div-close');
                        }
                    }

                    if(data['data']['order_count'] > 0 || data['data']['account_count'] > 0) {
                        if (index == 0) {
                            ts_open();
                            bf();//播放提示语音
                        }
                    }else{
                        layer.close(tc);
                    }
                    break;
                case 'ping':
                    // console.log(data);
                    break;
            }
        }

        //关闭
        ws.onclose = function (evt) {
            var close_data = '{"type":"close","user_id":'+"{:session('admin_id')}"+'}';
            ws.send(close_data);
        }
        //错误
        ws.onerror = function (evt) {
            console.log('错误：' + evt.data);
        }

        //心跳检测
        var heartCheck = {
            timeout: 100000, //9分钟发一次心跳
            timeoutObj: null,
            serverTimeoutObj: null,
            reset: function() {
                clearTimeout(this.timeoutObj);
                clearTimeout(this.serverTimeoutObj);
                return this;
            },
            start: function() {
                var self = this;
                this.timeoutObj = setTimeout(function() {
                    //这里发送一个心跳，后端收到后，返回一个心跳消息，
                    //onmessage拿到返回的心跳就说明连接正常
                    ws.send('{"type":"ping"}');
                    self.serverTimeoutObj = setTimeout(function() { //如果超过一定时间还没重置，说明后端主动断开了
                        // console.log("try=close")
                        // ws.close();
                    }, self.timeout)
                }, this.timeout)
            }
        }
    </script>
</body>
</html>